<template>
  <div class="room-watch">
    <template v-for="item in items">
      <room :item="item" :index="$index"></room>
    </template>
  </div>
</template>

<script>
import room from './room'
import { getRooms } from '../../vuex/getters'
import { getRoomList } from '../../vuex/actions'
export default {
  vuex: {
    getters: {
      items: getRooms
    },
    actions: {
      getRoomList
    }
  },
  ready () {
    this.getRoomList()
  },
  destroyed () {
    // this.$RoomManage.off('addRoom')
  },
  components: {
    room
  }
}
</script>

<style lang="less">
@import "../vue-carbon/utils/_mixins.less";
.room-note {
    span {
        font-size: 12px;
        font-weight: normal;
        padding-left: 15px;
        background-position: left center;
        background-repeat: no-repeat;
        margin-right: 3px;
        color: #2c3e50;
    }
    .nick {
        background-image: url("../../assets/ic_nick.svg");
    }
    .time {
        background-image: url("../../assets/ic_time.svg");
    }
    .state-0 {
        background-image: url("../../assets/ic_state_0.svg");
        color: #56abe4;
    }
    .state-1 {
        background-image: url("../../assets/ic_state_1.svg");
        color: #ea8010;
    }
    .state-2 {
        background-image: url("../../assets/ic_state_2.svg");
        color: #eb4f38;
    }
    .state-3 {
        background-image: url("../../assets/ic_state_3.svg");
        color: #11cd6e;
    }
    .clock {
        background-image: url("../../assets/ic_clock.svg");
    }
}
.count {
    padding: 0 10px;
    margin-top: 5px;
    flex-grow: 1;
    box-sizing: border-box;
    span {
        display: block;
        text-align: center;
        line-height: 20px;
        color: #2c3e50;
        font-size: 12px;
    }
}
.count span:first-child {
    color: #eb4f38;
}
.room-watch{
  .item-content{
    padding-top: 0px;
  }
  .list{
    margin: 0px;
  }
  .card-header{
    padding: 4px 0px;
  }
}
</style>
